window.addEventListener('load', function () {
    var le = document.querySelector('.le');
    var ri = this.document.querySelector('.ri');
    var banner_pic = this.document.querySelector('.banner_pic');
    var banner_picWidth = banner_pic.clientWidth;
    banner_pic.addEventListener('mouseenter', function () {
        le.style.display = 'block';
        ri.style.display = 'block';
        clearInterval(timer);
        timer = null;

    })
    banner_pic.addEventListener('mouseleave', function () {
        le.style.display = 'none';
        ri.style.display = 'none';
        timer = setInterval(function () {
            ri.click();
        }, 2000);

    })
    // 动态生成小圆圈
    var ul = banner_pic.querySelector('ul');
    var ol = banner_pic.querySelector('.circle');
    // console.log(ul.children.length);
    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');
        // 记录当前小圆圈的索引号
        li.setAttribute('index', i);
        // li插入到ol里
        ol.appendChild(li);
        // 当点击 li时点击事件
        li.addEventListener('click', function () {
            // 所有li清除current类名
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            // 为当前li设置current类名
            this.className = 'current';
            // 点击小圆圈移动图片 移动的是ul
            // ul的移动距离就是小圆圈的索引号*图片的宽度  为负值
            var index = this.getAttribute('index');
            // console.log(banner_picWidth);
            // li的索引号给num
            num = index;
            // li的索引号给circle
            circle = index;
            animate(ul, -index * banner_picWidth);
        })

    }
    // ol里面的第一个li加上current类名
    ol.children[0].className = 'current';
    // 克隆第一张图片放在ul后面
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    // 点击右侧按钮，图片滚动
    var num = 0;
    // circle控制小圆圈播放
    var circle = 0;
    //节流阀
    var flag = true;
    //右侧按钮
    ri.addEventListener('click', function () {
        if (flag) {
            flag = false;
            // 走到了最后一张图片ul 快速复原
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * banner_picWidth, function () {
                flag = true;
            });
            // 点击右侧按钮，小圆圈跟着变化
            circle++;
            if (circle == ol.children.length) {
                circle = 0;
            }
            // 先清除其余小圆圈的current类名
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            // 留下当前小圆圈current类名
            ol.children[circle].className = 'current';
        }
    })
    // 左侧按钮
    le.addEventListener('click', function () {
        if (flag) {
            flag = false;
            // 走到了最后一张图片ul 快速复原
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * banner_picWidth + 'px';

            }
            num--;
            animate(ul, -num * banner_picWidth, function () {
                flag = true;
            });
            // 点击右侧按钮，小圆圈跟着变化
            circle--;
            if (circle < 0) {
                circle = ol.children.length - 1;
            }
            // 先清除其余小圆圈的current类名
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            // 留下当前小圆圈current类名
            ol.children[circle].className = 'current';
        }
    })
    // 自动播放功能
    var timer = this.setInterval(function () {
        ri.click();
    }, 2000);

    //侧边栏
    $(function () {
        // 节流阀 互斥锁
        var flags = true;
        var asideTop = $(".column").offset().top;
        function scrolllong() {
            if ($(document).scrollTop() >= asideTop) {
                $(".aside").fadeIn();
            } else {
                $(".aside").fadeOut();
            }
        }
        scrolllong();
        $(window).scroll(function () {
            scrolllong();
            if (flags) {
                $('.floor .t').each(function (index, ele) {
                    if ($(document).scrollTop() >= $(ele).offset().top - 100) {
                        // console.log(index);
                        $(".aside li").eq(index + 1).addClass('current').siblings().removeClass('current');
                    }
                })
            }
        })
        //点击可到达指定区域
        for (var i = 1; i < 5; i++) {
            $(".aside li").eq(i).click(function () {
                flags = false;
                var index = $(this).index();
                console.log(index);
                var longs = $('.floor .t').eq(index - 1).offset().top;
                console.log(longs);
                $("body, html").stop().animate({
                    scrollTop: longs
                }, function () {
                    flags = true;
                })
                $(this).addClass("current").siblings().removeClass('current');
            })
        }

    })

})